<template>
	<div class="home-hot">
		<div class="hot-head">热销推荐</div>
		<div class="item-wrap border-bottom" v-for="item in recommendList" :key="item.id">
			<img :src="item.imgUrl" class="item-img">
			<div class="item-info">
				<p class="item-title">{{item.title}}</p>
				<p class="item-desc">{{item.desc}}</p>
				<button type="button" class="item-button">查看详情</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'HomeHot',
  props: {
  	recommendList: Array
  },
  data() {
    return {
      	msg: 'hot'
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/var.styl'
@import '~styles/mixin.styl'
	.home-hot
		margin-top: .2rem
		.hot-head
			line-height: 0.8rem
			background-color: $titleColor
			text-indent: .2rem
		.item-wrap
			// display: flex
			overflow: hidden
			.item-img
				width: 32%
				max-width: 140px
				padding: 0.12rem
				fl()
			.item-info
				width: calc(68% - 0.24rem)
				padding: 0.12rem
				fl()
			.item-title
				line-height: .58rem
				font-size: .32rem
				to()
			.item-desc
				width: 100%
				line-height: 0.4rem
				color: #ccc
				twoline()
			.item-button
				line-height: 0.44rem
				margin-top: 0.16rem
				background: #ff9300
				padding: 0 0.2rem
				border-radius: 0.06rem
				color: #fff
</style>
